<template>
  <div class="ml-30px" style="width: calc(100% - 280px)">
    <div class="flex flex-row gap-[10px]">
      <el-button type="primary">使用选中素材</el-button>
      <div>
        <el-button type="default" @click="onUpload">上传素材</el-button>
        <input
          type="file"
          id="upload_file"
          class="hidden"
          ref="uploadRef"
          multiple
          @change="upload"
          :accept="fileTypes.join(',')"
        />
      </div>
      <div class="w-1/1 flex flex-row justify-between">
        <div>
          <el-button type="success" @click="openFileUploadingList">上传列表</el-button>
          <el-button v-if="chooseList.length !== 0" @click="deleteFileList">批量删除</el-button>
          <el-button v-if="chooseList.length !== 0" @click="confirm" type="primary">确定</el-button>
        </div>
        <div class="flex w-[200px] search-ipt">
          <el-input
            :input-style="{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }"
            placeholder="搜索文件名称"
            v-model="fileName"
          ></el-input>
          <div
            class="bg-[var(--el-color-primary)] flex-col flex justify-center px-[11px] cursor-pointer"
            style="border-top-right-radius: 4px; border-bottom-right-radius: 4px"
            @click="search"
          >
            <el-icon color="#fff" size="20"><Search /></el-icon>
          </div>
        </div>
      </div>
    </div>
    <file-list ref="fileRef" v-bind="$attrs" :pid="pid" :filename="provideFilename" @choose="getChoose"></file-list>
  </div>
</template>

<script setup lang="ts">
import { returnUUID } from "@/api/modules/cloud";
import { generateUUID } from "@/utils/index";
import { useUploadStore } from "@/stores/modules/upload";
import FileList from "./FileList/index.vue";
import { File } from "@/components/UploadCool/interface/index";
import { ref } from "vue";
import { deleteFile } from "@/api/modules/file";
import { useHandleData } from "@/hooks/useHandleData";

const { handleFile, showDialog } = useUploadStore();
// 打开文件列表
const openFileUploadingList = () => {
  showDialog(true);
};

// 当前文件名称
const fileName = ref("");
const provideFilename = ref("");
// 搜索
const search = () => {
  provideFilename.value = fileName.value;
};
// 当前pros
interface Props {
  pid?: number;
}

const props = withDefaults(defineProps<Props>(), { pid: 1 });

// 获取md5
const getMD5 = (list: any) => {
  let newList: any = [];
  for (let i = 0; i < list.length; i++) {
    newList.push({ md5_secret: generateUUID(), size: list[i].size, type: list[i].type, filename: list[i].name });
  }
  return newList;
};

// 可上传的分类
const fileTypes = ["image/jpg", "image/png", "image/jpeg", "image/gif", "image/webp", "video/mp4", "video/avi"];
// 上传
const upload = async ({ target: { files } }: HTMLElement | any) => {
  const newList = getMD5(files);
  try {
    const { data } = (await returnUUID(newList)) as any;
    const newFileList: any = [];
    showDialog(true);
    for (let i = 0; i < files.length; i++) {
      const index = data.findIndex((e: any) => e.filename === files[i].name);
      newFileList.push({
        uuid: data[index].md5_secret,
        chunk: data[index].chunk,
        filename: data[index].filename,
        need_slice: data[index].need_slice,
        size: files[i].size,
        file: files[i]
      });
    }
    await handleFile(newFileList, props.pid);
    await fileRef.value?.getList(); //刷新
  } catch (error) {}
};
// 触发上传按钮
const onUpload = () => {
  let uploadRef = document.getElementById("upload_file");
  uploadRef!.click();
  (uploadRef as any).value = "";
};

const fileRef = ref<InstanceType<typeof FileList> | null>();

// 获取文件选中列表
const chooseList = ref<File[]>([]);
const getChoose = (list: File[]) => {
  chooseList.value = list;
};

// 删除文件
const deleteFileList = async () => {
  try {
    const ids = chooseList.value.map(e => e.id);
    await useHandleData(deleteFile, { ids }, "删除所选内容");
    fileRef.value!.getList();
  } catch (error) {}
};

// 确认
const emits = defineEmits(["confirm"]);
const confirm = () => {
  emits("confirm", chooseList.value);
};
</script>

<style lang="scss" scoped>
:deep(.search-ipt) {
  .el-input__wrapper {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
</style>
